<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>偏好设置 - 美食百家姓</title>

<link rel="stylesheet" href="../css/Bubble.css">
<style>
  body{background-color: aliceblue}	
</style>
</head>
<body>
	<div style="display: flex;flex-direction: column;">
		<a id="back" th:href="@{/index/(username=${username})}"> 返 回<a>
		<div class="wrapper_container">
			<div id="the_city_wrapper" class="wrapper_item" style="display: flex;">
				<div class="my_wrapper">
					<div class="tagcloud">
					  <!-- bo大小 co颜色 -->
						<a id="city_0" class="b03 co00" href="#">北京</a>
						<a id="city_1" class="b03 co00" href="#">天津</a>
						<a id="city_2" class="b03 co00" href="#">河北</a>
						<a id="city_3" class="b03 co00" href="#">山西</a>
						<a id="city_4" class="b03 co00" href="#">内蒙古</a>
						<a id="city_5" class="b03 co00" href="#">辽宁</a>
						<a id="city_6" class="b03 co00" href="#">吉林</a>
						<a id="city_7" class="b03 co00" href="#">黑龙江</a>
						<a id="city_8" class="b03 co00" href="#">上海</a>
						<a id="city_9" class="b03 co00" href="#">江苏</a>
						<a id="city_10" class="b03 co00" href="#">浙江</a>
						<a id="city_11" class="b03 co00" href="#">安徽</a>
						<a id="city_12" class="b03 co00" href="#">福建</a>
						<a id="city_13" class="b03 co00" href="#">江西</a>
						<a id="city_14" class="b03 co00" href="#">山东</a>
						<a id="city_15" class="b03 co00" href="#">河南</a>
						<a id="city_16" class="b03 co00" href="#">湖北</a>
						<a id="city_17" class="b03 co00" href="#">湖南</a>
						<a id="city_18" class="b03 co00" href="#">广东</a>
						<a id="city_19" class="b03 co00" href="#">广西</a>
						<a id="city_20" class="b03 co00" href="#">海南</a>
						<a id="city_21" class="b03 co00" href="#">重庆</a>
						<a id="city_22" class="b03 co00" href="#">四川</a>
						<a id="city_23" class="b03 co00" href="#">贵州</a>
						<a id="city_24" class="b03 co00" href="#">云南</a>
						<a id="city_25" class="b03 co00" href="#">西藏</a>
						<a id="city_26" class="b03 co00" href="#">陕西</a>
						<a id="city_27" class="b03 co00" href="#">甘肃</a>
						<a id="city_28" class="b03 co00" href="#">青海</a>
						<a id="city_29" class="b03 co00" href="#">宁夏</a>
						<a id="city_30" class="b03 co00" href="#">新疆</a>
						<a id="city_31" class="b03 co00" href="#">台湾</a>
						<a id="city_32" class="b03 co00" href="#">香港</a>
						<a id="city_33" class="b03 co00" href="#">澳门</a>
					</div>
				</div><!--wrapper-->
			</div>
			<div id="the_cuisine_wrapper" class="wrapper_item">
				<div class="my_wrapper">
					<div class="tagcloud">
					  <!-- bo大小 co颜色 -->
						<a id="cuisine_0" class="b02 co00" href="#">鲁菜</a>
						<a id="cuisine_1" class="b02 co00" href="#">川菜</a>
						<a id="cuisine_2" class="b02 co00" href="#">粤菜</a>
						<a id="cuisine_3" class="b02 co00" href="#">苏菜</a>
						<a id="cuisine_4" class="b02 co00" href="#">闽菜</a>
						<a id="cuisine_5" class="b02 co00" href="#">浙菜</a>
						<a id="cuisine_6" class="b02 co00" href="#">徽菜</a>
						<a id="cuisine_7" class="b02 co00" href="#">湘菜</a>
						<a id="cuisine_8" class="b02 co00" href="#">其他</a>
					</div>
				</div><!--wrapper-->
			</div>
			<div id="the_keyword_wrapper" class="wrapper_item">
				<div class="my_wrapper">
					<div class="tagcloud">
					  <!-- bo大小 co颜色 -->
						<a id="keyword_0" class="b01 co00" href="#">酸</a>
						<a id="keyword_1" class="b01 co00" href="#">甜</a>
						<a id="keyword_2" class="b01 co00" href="#">辣</a>
						<a id="keyword_3" class="b01 co00" href="#">清淡</a>
						<a id="keyword_4" class="b01 co00" href="#">咸</a>
						<a id="keyword_5" class="b01 co00" href="#">香</a>
						<a id="keyword_6" class="b01 co00" href="#">麻</a>
						<a id="keyword_7" class="b01 co00" href="#">主荤</a>
						<a id="keyword_8" class="b01 co00" href="#">主素</a>
					</div>
				</div><!--wrapper-->
			</div>
			<div id="hidden" style="display: none;width: 100%;height: 490px;"></div>
		</div>
		<div class="btn_list">
			<button id="the_city" type="button" class="btn-item bg-2">想去的城市</button>
			<button id="the_cuisine" type="button" class="btn-item bg-1">想吃的菜系</button>
			<button id="the_keyword" type="button" class="btn-item bg-1">偏好的口味</button>
		</div>
		<div class="submit">
			<button id="submit" type="button" class="btn btn-lg blue" style="width: 100px;height: 40px;background-color: aliceblue;">确&ensp;&ensp;定</button>
		</div>
	</div>

<!-- ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/scripts/jquery.min.js"></script>
<script src="../assets/scripts/Bubble.js"></script>

<script type="text/javascript">
    /*3D标签云*/
    tagcloud({
        selector: ".tagcloud",  //元素选择器
        fontsize: 16,       //基本字体大小, 单位px
        radius: 140,         //滚动半径, 单位px 页面宽度和高度的五分之一
        mspeed: "slow",   //滚动最大速度, 取值: slow, normal(默认), fast
        ispeed: "slow",   //滚动初速度, 取值: slow, normal(默认), fast
        direction: 135,     //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
        keep: false          //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
    });
	
	$(document).ready(function() {

		showPreferences();
		$("a").click(function(){
				let id = $(this).attr("id");
				let classes = $(this).attr("class").split(" ");
				let new_class;
				$("#"+id).removeClass(classes[1]);
				if(classes[0]=="b01"){
					new_class = "co01";
				}
				else if(classes[0]=="b02"){
					new_class = "co02";
				}
				else{
					new_class = "co03";
				}
				if(classes[1]=="co00"){
					$("#"+id).addClass(new_class);
				}else{
					$("#"+id).addClass("co00");
				}
		});
		$(".btn-item").click(function(){
			
			let id = $(this).attr("id");
			let classes = $(this).attr("class").split(" ");
			$(".btn-item").each(function(){
				$(this).removeClass("bg-2");
				$(this).addClass("bg-1");
			});
			$(".wrapper_item").each(function(){
				$(this).css("display","none");
			});
			if(classes[1]=="bg-1"){
				$(this).removeClass("bg-1");
				$("#"+id).addClass("bg-2");
				$("#"+id+"_wrapper").css("display","flex");
				$("#hidden").css("display","none");
			}
			else if(classes[1]=="bg-2"){
				$("#hidden").css("display","flex");
			}
		});
		$("#back").click(function(){
			window.location.href="index.html";
		});
		$("#submit").click(function(){
			let preferences = [];
			let username = '[[${username}]]';
			$(".tagcloud").each(function(){
				$(this).find(":not('.co00')").each(function(index,item){
					let i = $(item).attr("id");
					if(i!=undefined){
						let temp = i.split('_');
						if(temp[0]=="city"){
							preferences.push({"preference":temp[1],"type":"0"});
						}
						else if(temp[0]=="cuisine"){
							preferences.push({"preference":temp[1],"type":"1"});
						}
						else preferences.push({"preference":temp[1],"type":"2"});
					}
				});
			});
			let datas = {
				"username":username,
				"preferences":preferences
			};
			// console.log(datas);
			$.ajax({
				type : 'post',
				url: "/insertPreference",
				dataType: 'text',
				contentType:"application/json",
				data: JSON.stringify(datas),
				success: function (res) {
					alert("修改成功");
				},
				error:function (e) {
					alert("修改失败");
				}
			})
		});
	});

</script>
<script th:inline="javascript">
	function showPreferences() {
		let preferences = [
			[# th:each="preference : ${preferences}"]
				[[${preference}]],
				[/]
				];
		preferences.forEach(preference=>{
			let type = preference.type;
			let _id = preference.preferenceId;
			let _class = "";
			if(type == "0"){
				_id = "city_"+_id;
				_class = "co03";
			}
			else if(type == "1"){
				_id = "cuisine_"+_id;
				_class = "co02";
			}
			else {
				_id = "keyword_"+_id;
				_class = "co01";
			}
			$("#"+_id).removeClass("co00");
			$("#"+_id).addClass(_class);
		});
	}
</script>
</body>
</html>